<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">预约管理</h2>
		<span class="layui-breadcrumb pull-right"> <a
			href="#!home_console">首页</a> <a><cite>预约管理</cite></a>
		</span>
	</div>
	<div class="layui-card-body">
		<div class="layui-form toolbar">
			搜索： <select id="search-key">
				<option value="">-请选择-</option>
				<option value="user_name">姓名</option>
				<option value="user_phone">手机号</option>
				<option value="user_area">省市区</option>
				<option value="deal_with">处理结果</option>
			</select>&emsp; <input id="search-value" class="layui-input search-input"
				type="text" placeholder="输入关键字" />&emsp;
			<div class="layui-btn-group">
				<button id="btn-search" class="layui-btn">搜索</button>
				<button id="btn-reset" class="layui-btn">重置</button>
			</div>
		</div>

		<table class="layui-table" id="table" lay-filter="table"></table>
	</div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="table-bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="yuyue-state">
    <input type="checkbox" lay-filter="tpl-state" value="{{d.id}}" lay-skin="switch" lay-text="已联系|未联系"
           {{d.dealWith==1?'checked':''}}/>
</script>

<script>
	layui.use([ 'form', 'table', 'util', 'admin', 'element' ], function() {
		var form = layui.form;
		var table = layui.table;
		var layer = layui.layer;
		var util = layui.util;
		var admin = layui.admin;
		var element = layui.element;

		form.render('select');

		// 渲染表格
		table.render({
			elem : '#table',
			url : 'system/yuyue/list',
			page : true,
			cols : [ [ {
				type : 'numbers'
			}, {
				field : 'userName',
				sort : false,
				title : '姓名'
			}, {
				field : 'userPhone',
				sort : false,
				title : '手机号'
			}, {
				field : 'message',
				sort : false,
				title : '预约信息'
			}, {
				field : 'userArea',
				sort : false,
				title : '省市区'
			}, {
				field : 'userAreaDetail',
				sort : false,
				title : '详细地址'
			}, {
				sort : true,
				templet : function(d) {
					return util.toDateString(d.createTime);
				},
				title : '创建时间'
			}, {
				field : 'dealWith',
				sort : true,
				templet : '#yuyue-state',
				title : '处理结果'
			}, {
				align : 'center',
				toolbar : '#table-bar',
				title : '操作'
			} ] ]
		});

		// 搜索按钮点击事件
		$('#btn-search').click(function() {
			var key = $('#search-key').val();
			var value = $('#search-value').val();
			table.reload('table', {
				where : {
					searchKey : key,
					searchValue : value
				}
			});
		});

		// 搜索按钮点击事件
		$('#btn-reset').click(function() {
			location.reload();
		});

		// 修改处理结果
		form.on('switch(tpl-state)', function(obj) {
			layer.load(2);
			admin.req("system/yuyue/updateState", {
				id : obj.elem.value,
				dealWith : obj.elem.checked ? 1 : 0
			}, function(data) {
				layer.closeAll('loading');
				if (data.code == 1) {
					layer.msg("处理结果修改成功", {
						icon : 1
					});
					table.reload('table', {});
				} else {
					layer.msg(data.msg, {
						icon : 2
					});
					$(obj.elem).prop('checked', !obj.elem.checked);
					form.render('checkbox');
				}
			}, "post");
		});

		// 工具条点击事件
		table.on('tool(table)', function(obj) {
			var data = obj.data;
			if (obj.event === 'del') { //删除
				layer.confirm('确定要删除吗？', function() {
					layer.load(2);
					admin.req("system/yuyue/delete", {
						id : obj.data.id
					}, function(data) {
						layer.closeAll('loading');
						if (data.code == 1) {
							layer.msg(data.msg, {
								icon : 1
							});
							obj.del();
						} else {
							layer.msg(data.msg, {
								icon : 2
							});
						}
					}, "post");
				});
			}
		});

	});
</script>